package myJs.cps.myTable

import myJs.Implicits._
import myJs.cps.BootstrapTableCp.Column
import myJs.cps.Style
import myJs.myPkg.i18n.ReactI18next
import myJs.myPkg.jquery.$
import myJs.tool.Pojo._
import myJs.tool.Tool
import org.scalajs.dom.Event
import org.scalajs.dom.html.Input
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.Hooks.useEffect
import slinky.core.facade.React
import slinky.web.html._

import scala.collection.immutable.SeqMap
import scala.scalajs.js

/**
 * Created by yz on 21/1/2022
 */
@react object FilterConditionCp {

  case class Props(searchMap: SeqMap[String, SearchData], fieldColumnMap: SeqMap[String, Column],
                   removeCondition: String => Unit)

  val component = FunctionalComponent[Props] { props =>

    val js.Tuple3(t, i18n, _) = ReactI18next.useTranslation()

    val searchMap = props.searchMap

    object FTool {

      def removeCondition(curField: String) = () => {
        props.removeCondition(curField)
      }

    }

    if (searchMap.nonEmpty) {
      div(style := Style(marginBottom = "10px"), s"${t("filteringAndSort")}: ",
        span(id := "filterCondition",
          props.searchMap.map { case (field, searchData) =>
            val column = props.fieldColumnMap(field)
            val eachFilterConditionE = searchData match {
              case DateSearchData(startDate, endDate) =>
                val trueStartDate = if (startDate.isEmpty) "None" else startDate
                val trueEndDate = if (endDate.isEmpty) "None" else endDate
                span(className := "eachFilterCondition",
                  span(s"${column.title}"),
                  s" ${trueStartDate} - ${trueEndDate}",
                )
              case TextSearchData(searchType, text) =>
                val mulTexts = text.split(";").toList
                span(className := "eachFilterCondition",
                  span(s"${column.title} "),
                  span(style := Style(color = "red"), s"${searchType.toLowerCase} "),
                  mulTexts.zipWithIndex.map { case (x, curI) =>
                    val orSpan = if (curI != mulTexts.size - 1) span(style := Style(color = "#428CCB"), " or ") else
                      span()
                    span(key := s"${curI}", x, orSpan)
                  }
                )
              case NumericSearchData(min, max,kind) =>
                val trueMin = if (min.isEmpty) "None" else min
                val trueMax = if (max.isEmpty) "None" else max
                span(className := "eachFilterCondition",
                  span(s"${column.title}"),
                  s" ${trueMin} - ${trueMax}",
                )
              case CheckboxSearchData(values)=>
                span(className := "eachFilterCondition",
                  span(s"${column.title} "),
                  span(style:=Style(color = "red"),"IN"),
                  s" ${values.mkString(",")}",
                )
            }
            span(key := s"${field}", className := "eachFCParent",
              eachFilterConditionE,
              sup(className := "mySup myRemove", onClick := FTool.removeCondition(column.field),
                i(className := "fa fa-times-circle")
              ), " "
            )
          }
        )
      )
    } else null
  }

}
